<template>
  <div class="app-container">
    <el-card>
      <div class="flex justify-end mb-5">
        <el-button type="primary" @click="handleAdd">新增场景二维码</el-button>
      </div>
      <page-table
        :columns="column"
        :data="dataSource"
        :loading="listLoading"
        :options="options"
      ></page-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="handleList"
      />
    </el-card>
  </div>
</template>

<script>
import Clipboard from 'clipboard'

export default {
  name: 'index',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      listLoading: false,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        name: ''
      },
      total: 0,
      dataSource: [],
      options: {
        select: false,
        border: false,
        index: false
      }
    }
  },
  computed: {
    column() {
      return [
        {
          prop: 'name',
          label: '场景名称'
        },
        {
          prop: 'qrcodeUrl',
          label: '二维码',
          render: (h, { row }) => {
            return (
              <div>
                <el-image
                  style="width:100px;height:100px;line-height: 100px;"
                  src={row.qrcodeUrl}
                  preview-src-list={[row.qrcodeUrl]}
                  fit="cover"
                >
                  <div slot="error" class="image-slot">
                    <div>暂无二维码</div>
                  </div>
                </el-image>
              </div>
            )
          }
        },
        {
          prop: 'pageUrl',
          label: '链接路径',
          render: (h, { row }) => {
            return (
              <div>
                {row.pageUrl}
                <span
                  style="color:#1989FA;cursor: pointer;margin-left: 10px"
                  id="copy"
                  data-clipboard-text={row.pageUrl}
                  onClick={() => this.handleCopy()}
                >
                  复制
                </span>
              </div>
            )
          }
        },
        {
          prop: 'visitUserNum',
          label: '查看人数',
          render: (h, { row }) => {
            return <div>{row.visitUserNum || 0}</div>
          }
        },
        {
          prop: 'registerUserNum',
          label: '拉新人数',
          render: (h, { row }) => {
            return <div>{row.registerUserNum || 0}</div>
          }
        },
        {
          prop: 'isShow',
          label: '启用状态',
          render: (h, { row }) => {
            return <div>{row.isShow ? '启用' : '未启用'}</div>
          }
        },
        {
          prop: 'createdTime',
          label: '创建时间'
        },
        {
          prop: '',
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                <el-button type="text" onClick={() => this.handleToData(row)}>
                  数据
                </el-button>
                <el-button type="text" onClick={() => this.handleEdit(row.id)}>
                  编辑
                </el-button>
                <el-button type="text" onClick={() => this.handleEnable(row)}>
                  {row.isShow ? '隐藏' : '启用'}
                </el-button>
                {!row.isShow ? (
                  <el-button
                    type="text"
                    style="color:#BEBEBE"
                    onClick={() => this.handleDelete(row.id)}
                  >
                    删除
                  </el-button>
                ) : (
                  ''
                )}
              </div>
            )
          }
        }
      ]
    }
  },
  created() {
    this.handleList()
  },
  methods: {
    //获取列表
    async handleList() {
      const params = {
        ...this.listQuery
      }
      const { data } = await this.$http.sceneCode.getSceneCodeList(params)
      console.log('获取列表', data)
      this.dataSource = data.records
      this.total = data.total
    },

    //跳转数据页面
    handleToData(row) {
      this.$router.push({
        path: '/operation/scene-code/code-data',
        query: { id: row.id, sceneUrl: row.sceneUrl, sceneName: row.sceneName }
      })
    },

    //启用  or  隐藏
    handleEnable(row) {
      const msg = row.isShow ? '隐藏成功' : '启用成功'
      const params = { id: row.id, isShow: !row.isShow }
      this.$confirm(`是否${row.isShow ? '隐藏' : '启用'}该场景二维码？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await this.$http.sceneCode.isShow(params).catch(err => err)
          this.$message.success(msg)
          this.handleList()
        })
        .catch(() => {})
    },

    //删除
    handleDelete(id) {
      this.$confirm(`是否删除该场景二维码？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await this.$http.sceneCode.delete(id).catch(err => err)
          this.$message.success('删除成功')
          this.handleList()
        })
        .catch(() => {})
    },

    //编辑
    handleEdit(id) {
      this.$router.push({ path: '/operation/scene-code/edit-code', query: { type: 'edit', id } })
    },

    //新增
    handleAdd() {
      this.$router.push({ path: '/operation/scene-code/add-code', query: { type: 'add' } })
    },

    //复制路径
    handleCopy() {
      let clipboard = new Clipboard('#copy')
      clipboard.on('success', e => {
        this.$message.success('复制成功')
        e.clearSelection()
        clipboard.destroy()
        return
      })
      clipboard.on('error', function (e) {
        console.log(e)
        e.clearSelection()
        clipboard.destroy()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table th.el-table__cell {
  background-color: #e8e8e9;
  color: rgb(16, 16, 16);
  font-size: 14px;
  font-weight: 400;
}
/deep/.el-table__row {
  font-size: 14px;
}
</style>
